<!-- 缺陷库 -->
<template>
  <div style="overflow: hidden;width:100%;height:100%;" id="xGridParent">
    <vxe-grid ref="xGrid" v-bind="grid_options" :row-config="{height:36}">
      <template #toolbar_tools>
        <el-button type="primary" :size="size" icon="fa fa-plus" @click="addDefectModal()"> 新增</el-button>
        <el-button type="primary" :size="size" icon="fa fa-edit (alias)" @click="EditDefectModal()"> 编辑</el-button>
        <el-button type="primary" :size="size" icon="fa fa-trash-o"> 删除</el-button>
      </template>
    </vxe-grid>
    <defectmc ref="defectmc"></defectmc>
    <defectModel ref="defectModel"></defectModel>
  </div>


</template>

<script>
import defectmc from './defectMc.vue'
import defectModel from './defectModel.vue'
import VXETable from "vxe-table";

export default {
  name: 'defectdangerTable',
  components: {defectmc, defectModel},
  data() {
    return {
      size: 'small',
      grid_options: {
        border: true,
        stripe: true,
        showHeaderOverflow: false,
        showOverflow: true,
        keepSource: true,
        id: 'full_edit_1',
        height: 700,
        rowId: 'id',  //指定记录主键
        rowConfig: {
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
          // checkMethod: this.checkColumnMethod
        },
        sortConfig: {
          trigger: 'cell',
          remote: true
        },
        filterConfig: {
          remote: true
        },
        formConfig: {
          form: true, // 启用表单代理
          size: "small",        //尺寸
          titleAlign: "right",  //所有项的标题对齐方式
          titleWidth: "120", //标题宽度
          titleColon: true,     //是否显示标题冒号
          items: [
            {
              field: 'bdrwmc',
              title: '单位名称:',
              span: 6,
              itemRender: {
                name: '$select',
                options: [],
                props: {placeholder: '---请选择---', clearable: true,},
                events: {change: this.ssbdrwChangeEvent}
              },
            },
            {
              field: 'dwbm',
              title: '缺陷隐患名称:',
              span: 6,
              itemRender: {name: '$input', props: {placeholder: '请输入缺陷隐患名称', clearable: true,}},
            },
            {
              field: 'dwbm',
              title: '缺陷来源:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '问题分类:',
              span: 6,
              itemRender: {name: 'wtflselect', props: {placeholder: '---请选择---', clearable: true,}}
            },
            {
              field: 'dwbm',
              title: '处理状态:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'startTime',
              title: '发现日期',
              span: 6,
              itemRender: {name: '$input', props: {type: 'datetime', clearable: true,}},
              folding: true
            },
            {
              field: 'endTime',
              title: '至',
              span: 6,
              itemRender: {name: '$input', props: {type: 'datetime', clearable: true,}},
              folding: true
            },
            {
              field: 'startTime',
              title: '处理完成日期',
              span: 6,
              itemRender: {name: '$input', props: {type: 'datetime', clearable: true,}},
              folding: true
            },
            {
              field: 'endTime',
              title: '至',
              span: 6,
              itemRender: {name: '$input', props: {type: 'datetime', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '缺陷类型:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '发现人:',
              span: 6,
              itemRender: {name: '$input', props: {placeholder: '请输入发现人', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '发现班组:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '站线类型:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '设备名称:',
              span: 6,
              itemRender: {name: '$input', props: {placeholder: '请输入站线名称', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '站线名称:',
              span: 6,
              itemRender: {name: '$input', props: {placeholder: '请输入站线名称', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '缺陷级别:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              field: 'dwbm',
              title: '是否合并:',
              span: 6,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请选择---', clearable: true,}},
              folding: true
            },
            {
              span: 6, collapseNode: true, align: 'right', itemRender: {
                name: '$buttons', children: [
                  {props: {type: 'submit', content: '查询', status: 'primary', icon: 'fa fa-search'}},
                  {props: {type: 'reset', content: '重置', icon: 'fa fa-reply'}},
                ]
              }
            }
          ]
        },
        toolbarConfig: {
          buttons: [],
          refresh: true,
          custom: true,
          slots: {
            buttons: 'toolbar_tools'    //按钮列表//
          }
        },
        pagerConfig: {
          pageSize: 10,
          pageSizes: [5, 10, 15, 20, 50, 100],
          layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
          background: true,
        },
        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
          // 对应响应结果 { result: [], page: { total: 100 } }
          props: {
            result: 'returnData.data', // 配置响应结果列表字段
            total: 'returnData.total' // 配置响应结果总页数字段
          },
          // 只接收Promise，具体实现自由发挥
          // ajax: {
          //      // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
          //      query: ({ page, sorts, filters, form }) => {
          //          // =====给表单项赋初始值======
          //          this.initFormData(form);
          //       //    this.enableDefault = false;
          //          const queryParams = Object.assign({}, form)
          //         // const queryParams = this.initFormData(form)
          //          // 处理排序条件
          //          const firstSort = sorts[0]
          //          if (firstSort) {
          //              queryParams.sort = firstSort.property
          //              queryParams.order = firstSort.order
          //          }
          //          // 处理筛选条件

          //       filters.forEach(({property, values}) => {
          //       queryParams[property] = values.join(',')
          //     })
          //      return this.queryData(page,queryParams)
          //      },
          //  }
        },
        columns: [
          {type: 'seq', title: '序号', width: 60, align: 'center', headerAlign: 'center'},
          {type: 'checkbox', width: 60, align: 'center', headerAlign: 'center'},
          {field: 'dwmc', title: '单位名称', minWidth: "100px", align: 'center', headerAlign: 'center',},
          {field: 'khjbmc', title: '处理状态', minWidth: "120px", align: 'center', headerAlign: 'center',},
          {
            field: 'bzdxmc',
            title: '缺陷名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {
            field: 'dlwz',
            title: '消缺工单名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {
            field: 'sdkhmc',
            title: '合并缺陷隐患名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {field: 'bzbz', title: '缺陷来源', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'bzbz', title: '发现人', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'jhkssj', title: '发现班组', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'jhkssj', title: '发现日期', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'bzbz', title: '详细地点', minWidth: "100px", align: 'center', headerAlign: 'center',},
          {field: 'bzbz', title: '详细描述', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'bzbz', title: '问题分类', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {field: 'bzbz', title: '缺陷类型', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {
            field: 'bzbz',
            title: '站线名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {field: 'bzbz', title: '站线类型', minWidth: "160px", align: 'center', headerAlign: 'center',},
          {
            field: 'bzbz',
            title: '任务名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {
            field: 'bzbz',
            title: '设备名称',
            minWidth: "160px",
            align: 'center',
            headerAlign: 'center',
            showOverflow: true
          },
          {field: 'bzbz', title: '设备类型名称', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '部件名称', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '部位名称', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '缺陷内容', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '缺陷程度', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '缺陷级别', minWidth: "160px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '消缺前照片', minWidth: "120px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '消缺后照片', minWidth: "120px", align: 'center', headerAlign: 'center'},
          {field: 'bzbz', title: '处理日期', minWidth: "160px", align: 'center', headerAlign: 'center'},
        ],
        checkboxConfig: {
          // labelField: 'id',
          reserve: true,
          highlight: true,
          range: true
        },
        editConfig: {
          trigger: 'click',
          mode: 'row',
          showStatus: true
        }
      },
      //  api: 'fetchQueryQueryRwxqByPage',
      // init: true
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(function () {
      this.setTableHeight();
    })
    window.addEventListener('resize', this.setTableHeight);
  },
  destroyed: function () {
    window.removeEventListener('resize', this.setTableHeight);
  },
  methods: {
    // 高度自适应
    setTableHeight: function () {
      const tableContainer = document.querySelector("#xGridParent");
      const height = tableContainer.clientHeight;
      this.grid_options.height = height - 50;
    },
    addDefectModal() {
      this.$refs.defectModel.showDialog()

    },
    EditDefectModal() {
      const rowArr = this.$refs.xGrid.getCheckboxRecords(true);
      if (rowArr && rowArr.length === 1) {
        this.$refs.defectModel.showDialog(true, rowArr[0])
      } else {
        VXETable.modal.confirm({content: '有且只能够操作一条记录\n请选择一条记录', title: '操作异常', status: 'error'})
      }

    },


    defectModal() {
      this.$refs.defectmc.showDialog()
    },


    // initFormData(form) {
    //    form = this.headerData
    //    return form
    // },
    //  queryData:(page,formData) => {
    //   const queryParams = {
    //     startTime: moment(formData.startTime).format('YYYY-MM-DD'),
    //     dataType:formData.title,
    //     zrwid:formData.bdrwbm,
    //     dwbm:formData.dwOptions.ITEMID=='9999'?'21':formData.dwOptions.ITEMID,
    //     pageSize: page.pageSize,
    //     pageIndex: page.currentPage,
    //   }
    //   return DashboardApi.fetchQueryQueryRwxqByPage(queryParams)
    // }

  }
}

VXETable.renderer.add('wtflselect', {
  // 项内容模板
  renderItemContent(h, renderOpts, params) {
    const {data, property} = params
    const props = renderOpts.props || {}
    const options = renderOpts.options
    return [
      <vxe-select options={options} disabled>
      </vxe-select>
    ]
  }
})
</script>

<style scoped>

</style>
